<template>
  <div class="adviser-detail">
    <div class="banner">
      <van-image lazy-load
        width="64px"
        height="64px"
        :src="detail.tgInfo.avatar"
        round
        class="avatar"
      />
      <div class="info">
        <div class="line">
          <h4>{{detail.tgInfo.name}}</h4>
          <p class="small">{{detail.followCount}} 粉丝</p>
          <p class="small">执业证号：{{detail.tgInfo.license}}</p>
        </div>
        <div class="focus-box">
          <span v-if="detail.isFollow === 1" class="focus-btn focused" @click="follow(-1)">已关注</span>
          <span v-else class="focus-btn focus" @click="follow(1)">关 注</span>
        </div>
      </div>
    </div>
    <div class="profile">
      <div class="box">
        <div class="tag-list small van-hairline--bottom">
          <span
            class="tag"
            v-for="tag in detail.tgInfo.tags"
            :key="tag.id"
          >{{tag.name}}</span>
        </div>
        <div class="profile-content">
          <p :class="{'van-multi-ellipsis--l3' : !expanded }">
            {{ detail.tgInfo.profile }}
          </p>
          <div class="text-center arrow" @click="expanded = !expanded"
            v-if="detail.tgInfo.profile && detail.tgInfo.profile.length > 100"
          >
            <van-icon color="#5e616b" v-if="expanded"  name="arrow-up" />
            <van-icon color="#5e616b" v-else name="arrow-down" />
          </div>
        </div>
      </div>
      <div class="status" v-if="liveList.length && liveList[0].status === 1">
        <i class="icon icon-living-circle"></i>
        <span style="color: #eb4339">直播中</span>
      </div>
      <div class="status" v-else>
        <i class="icon icon-live-over-circle"></i>
        <span style="color: #5e616b;">未直播</span>
      </div>
    </div>
    <ul class="main">
      <van-tabs sticky swipeable v-model="active" @rendered="onRendered" line-width="20px" line-height="4px">
        <van-tab title="直播">
          <timeline class="live-list" v-if="liveList.length">
            <timeline-item v-for="live in liveList" :key="live.id" @click.native="$router.push(`/live/stage/${live.id}`)">
              <template #timeline-text>
                <div v-if="showMonth(live.stageDate)" class="has-month">
                  <h3>{{live.stageDate.slice(4, 6)[0] === '0' ? live.stageDate.slice(5, 6) : live.stageDate.slice(4, 6)}}月</h3>
                  <span>{{live.stageDate.slice(6, 8)}}</span>
                </div>
                <span v-else class="timeline-text">{{live.stageDate.slice(6, 8)}}</span>
              </template>
              <div class="live-list-item">
                <h3 class="van-ellipsis">{{live.summary}}</h3>
                <div class="live-info">
                  <span>{{live.readCount}}人观看</span>
                  <span style="float: right;">{{live.likeCount}}赞</span>
                </div>
              </div>
            </timeline-item>
          </timeline>
          <van-empty description="暂无数据" v-else-if="!loadingMore" />
        </van-tab>
        <van-tab title="组合">
          <ul class="portfolio-list" v-if="portfolioList.length">
            <li v-for="item in portfolioList" :key="item.portfolio.id" class="portfolio-list-item tap-active"
              @click="$router.push(`/portfolio/detail/${item.portfolio.id}`)"
            >
              <h3 class="van-ellipsis van-hairline--bottom">{{item.portfolio.name}}</h3>
              <van-row>
                <van-col span="8" class="text-left" >
                  <h4 :class="item.relation.totalProfitRate | numberColor">{{item.relation.totalProfitRate | numberFormat('0.00%')}}</h4>
                  <p>总收益</p>
                </van-col>
                <van-col span="8" class="text-center" >
                  <h4>{{item.relation.holdpos | numberFormat('0.00%')}}</h4>
                  <p>组合仓位</p>
                </van-col>
                <van-col span="8" class="text-right" >
                  <h4>{{item.relation.successRate | numberFormat('0.00%')}}</h4>
                  <p>胜率</p>
                </van-col>
              </van-row>
            </li>
          </ul>
          <van-empty description="暂无数据" v-else-if="!loadingMore" />
        </van-tab>
        <van-tab title="观点">
          <ul class="view-list" v-if="viewList.length">
            <li v-for="view in viewList" :key="view.id" class="view-list-item tap-active"
              @click="$router.push(`/view/detail/${view.id}`)"
            >
              <div class="view-item van-hairline--bottom">
                <h3 class="van-ellipsis">{{view.title}}</h3>
                <p class="van-multi-ellipsis--l2">{{view.summary}}</p>
                <span>{{view.publishTime | dateFormat('YYYY-MM-DD HH:mm')}} 发布</span>
              </div>
            </li>
          </ul>
          <van-empty description="暂无数据" v-else-if="!loadingMore" />
        </van-tab>
        <div class="text-center">
          <van-loading v-show="loadingMore" type="spinner" size="16px">加载中...</van-loading>
        </div>
      </van-tabs>
    </ul>
  </div>
</template>

<script>
import {  mapGetters, mapState, mapActions } from 'vuex';
import { Tab, Tabs, Tag, Loading, Empty } from "vant";
import { getTgDetail, followTg } from '../../api/adviser';
import Timeline from '../../components/Timeline';
import TimelineItem from '../../components/TimelineItem';
import { pageLiveStageApp } from '../../api/live';
import { pageViewApp } from '../../api/view';
import { queryPortfolioListApp } from '../../api/portfolio';
import groupBy from 'lodash/groupBy';

export default {
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Tag.name]: Tag,
    [Loading.name]: Loading,
    [Empty.name]: Empty,
    Timeline,
    TimelineItem
  },

  data() {
    return {
      active: 0,
      detail: {
        followCount: 0,
        tgInfo: {
          avatar: ''
        },
        isFollow: -1
      },
      liveList: [],
      portfolioList: [],
      viewList: [],
      serviceList: [],
      expanded: false,
      livePage: 1,
      portfolioPage: 1,
      viewPage: 1,
      servicePage: 1,
      loadingMore: false
    }
  },

  computed: {
    ...mapGetters(['isLogin']),

    dateGroupByMonth() {
      const stageDateList = this.liveList.map(live => live.stageDate);
      return groupBy(stageDateList, (date) => date.slice(4, 6))
    }
  },

  mounted() {
    this.$setTitle('投顾主页');
    this.getTgDetail();
    this.pageLiveStageApp();
    this.$bus.$on('reachBottom', this.reachBottom.bind(this));
  },

  beforeDestroy() {
    this.$bus.$off('reachBottom');
  },

  methods: {
    ...mapActions(['login']),

    async getTgDetail() {
      const data = await getTgDetail(this.$route.params.id);
      this.detail.tgInfo = data.data.tgInfo;
      this.detail.followCount = data.data.followCount;
      this.detail.isFollow = data.data.isFollow;
    },

    async pageLiveStageApp() {
      try {
        this.loadingMore = true;
        const data = await pageLiveStageApp({
          tgId: this.$route.params.id,
          offset: 0,
          size: 10
        });
        this.liveList = data.list;
      } catch (error) {
        console.error(error);
      } finally {
        this.loadingMore = false;
      }
    },

    async pageViewApp() {
      try {
        this.loadingMore = true;
        const data = await pageViewApp({
          tgId: this.$route.params.id,
          type: 2,
          offset: 0,
          size: 10
        });
        this.viewList = data.list;
      } catch (error) {
        console.error(error);
      } finally {
        this.loadingMore = false
      }
    },

    async pageServiceApp() {
      try {
        this.loadingMore = true;
        const data = await pageServiceApp({
          type: 2,
          offset: 0,
          size: 10,
          tgId: this.$route.params.id,
        });
        this.serviceList = data.list;
      } catch (error) {
        console.error(error);
      } finally {
        this.loadingMore = false;
      }
    },

    async queryPortfolioListApp() {
      try {
        this.loadingMore = true;
        const data = await queryPortfolioListApp({
          tgId: this.$route.params.id
        });
        this.portfolioList = data.list;
      } catch (error) {
        console.error(error);
      } finally {
        this.loadingMore = false;
      }
    },

    onRendered(name, title) {
      if(name === 1) {
        this.queryPortfolioListApp();
      } else if(name === 2) {
        this.pageViewApp();
      } else if(name === 3) {
        this.pageServiceApp();
      }
    },

    async follow(isFollow) {
      if(!this.isLogin) {

        // 执行vuex的login方法
        return this.login();
      }
      const data = await followTg(this.$route.params.id, isFollow);
      if(data.code === 0) {
        this.detail.isFollow = -this.detail.isFollow;
        isFollow === 1 ? this.$toast('关注成功') : this.$toast('取消关注成功');
        isFollow === 1 ? this.detail.followCount++ : this.detail.followCount--;
      } else {
        this.$toast(data.message);
      }
    },

    async reachBottom() {
      try {
        this.loadingMore = true;
        if(this.active === 0) {
          ++this.livePage;
          const data = await pageLiveStageApp({
            tgId: this.$route.params.id,
            offset: (this.livePage - 1) * 10,
            size: 10
          });
          this.liveList = this.liveList.concat(data.list);
        } else if(this.active === 1) {
          ++this.portfolioPage;
          const data = await queryPortfolioListApp({
            tgId: this.$route.params.id,
            offset: (this.portfolioPage - 1) * 10,
            size: 10
          })
          this.portfolioList = this.portfolioList.concat(data.list);
        } else if(this.active === 2) {
          ++this.viewPage;
          const data = await pageViewApp({
            tgId: this.$route.params.id,
            type: 2,
            offset: (this.viewPage - 1) * 10,
            size: 10
          });
          this.viewList = this.viewList.concat(data.list);
        } else if(this.active === 3) {
          ++this.servicePage;
          const data = await pageServiceApp({
            tgId: this.$route.params.id,
            type: 2,
            offset: (this.servicePage - 1) * 10,
            size: 10
          });
          this.serviceList = this.serviceList.concat(data.list);
        }
      } catch (error) {
        console.error(error);
      } finally {
        this.loadingMore = false
      }
    },

    showMonth(stageDate) {
      let show = false;
      const month = stageDate.slice(4, 6);
      if(month in this.dateGroupByMonth) {
        show = stageDate === this.dateGroupByMonth[month][0];
      }
      return show;
    }
  }
};
</script>

<style lang="less">
.adviser-detail {
  .banner {
    color: #fff;
    background-image: url('../../assets/bg_tg.png');
    display: flex;
    align-items: center;
    padding: 15px;
    padding-bottom: 80px;
    background-repeat: no-repeat;
    background-size: cover;

    .avatar {
      margin-right: 15px;
      display: inline-block;
      border: 1px solid #eee;
      padding: 2px;
      min-width: 64px;
    }

    .info {
      display: flex;
      align-items: center;
      width: 100%;
    }

    .line {
      line-height: 1.4;
      h4 {
        font-size: 18px;
        margin-right: 15px;
      }
      p {
        font-size: 13px;
      }
    }

    .focus-box {
      flex: 1;
      text-align: right;
      .focus-btn {
        padding: 5px 10px;
        font-size: 12px;

        &.focused {
          color: #ce251a;
          border: 1px solid #ce251a;
          border-radius: 25px;
          background-color: #f97e76;
        }

        &.focus {
          color: #fff;
          border: 1px solid #fff;
          border-radius: 25px;
          background-color: #f97e76;
        }
      }
    }

  }

  .profile {
    background: #fff;
    padding: 15px;
    color: #5e616b;

    .arrow {
      position: relative;
      bottom: -10px;
    }

    .status {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #5e616b;
    }

    .box {
      margin-top: -85px;
      background: #fff;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,0.10);
      border-radius: 10px;
      margin-bottom: 15px;
    }

    .tag-list, .profile-content {
      padding: 15px;
      font-size: 12px;
    }

    p {
      line-height: 1.45;
      text-align: justify;
    }

    .tag {
      color: #eb4339;
      background-color: #fff;
      border: 1px solid #eb4339;
      margin-right: 10px;
      font-size: 12px;
      padding: 1px 3px;
    }
  }

  .main {
    position: relative;
    margin-top: 10px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;

    .van-tab__text {
      font-size: 16px;
    }

    .live-list {
      background-color: #fff;
      padding-top: 20px;
      padding-right: 15px;

      .live-list-item {
        background-color: #f5f6f6;
        padding: 15px;
        border-radius: 4px;

        h3 {
          color: #333;
          font-size: 16px;
          margin-bottom: 15px;
        }

        .live-info {
          font-size: 12px;
          color: #919bb2;
        }
      }

      .timeline-item {
        .timeline-time {
          top: 35px;
        }
        .timeline-line {
          height: 50%;
          top: 40px;
          left: -43px;
        }
        .timeline-text {
          top: -12px;
          left: -3px;
          font-size: 14px;
          color: #9d9ea7;
        }
        .timeline-circle {
          background-color: #e0e1e6;
          background-image: unset;
          width: 5px;
          height: 5px;
          margin-left: 5px;
        }
        .has-month {
          position: absolute;
          top: -34px;
          word-break: keep-all;
          margin-top: 7px;

          h3 {
            font-size: 18px;
            color: #2b313d;
          }

          span {
            font-size: 14px;
            color: #9d9ea7;
          }
        }
      }

      .timeline-item:first-child {
        .live-list-item {
          background: #FFFFFF;
          box-shadow: 0 2px 12px 0 rgba(195,196,202,0.20);
        }
        .timeline-line, .timeline-circle {
          background-color: #eb4339;
        }
        .has-month span {
          color: #eb4339;
        }
      }
    }

    .portfolio-list {
      .portfolio-list-item {
        padding: 15px;
        margin-bottom: 10px;
        background-color: #fff;

        h3 {
          font-size: 16px;
          padding-bottom: 10px;
          color: #2b313d;
        }

        h4 {
          font-size: 16px;
        }

        p {
          color: #9d9ea7;
          font-size: 14px;
        }

        .van-row {
          margin-top: 10px;
        }
      }
    }

    .view-list {
      background-color: #fff;
      .view-list-item {
        padding: 0 15px;

        h3 {
          font-size: 16px;
          color: #121d32;
        }

        p {
          margin: 10px 0;
          font-size: 14px;
          color: #5e616b;
        }

        span {
          font-size: 12px;
          color: #919bb2;
        }

        .view-item {
          padding: 15px 0;
        }
      }
    }

    .service-list {
      .top {
        display: flex;
        align-items: center;
      }
      .service-item {
        background: #fff;
        padding: 15px;
        margin-bottom: 5px;

        .item-body {
          .tag {
            flex: 1;
            text-align: right;
          }
          h3 {
            margin: 10px 0;
          }
          p {
            line-height: 1.41;
          }
        }

      }
    }
  }
}
</style>
